<template>
  <div class="image-list">

    <!-- 上传的图片列表 -->
    <div v-for="(item, index) in uploadImg.showImages" :key="item.url" class="list-item">
      <img v-if="item.type === 'origin'" :src="baseUrl+item.url" alt="相关图片">
      <img v-else :src="item.url" alt="相关图片">
      <!-- 预览 -->
      <div class="item-hover">
        <a-icon style="margin-right: 10px;" type="eye" @click="openPreview(index)"/>
        <a-icon type="delete" @click="deleteRelateImg(index)"/>
      </div>
    </div>
    <PhotoViewer ref="photoViewer"/>
    <!-- 上传组件，图片多于5张隐藏 -->
    <a-upload
        v-if="uploadImg.showImages && uploadImg.showImages.length < 1"
        :before-upload="beforeUpload"
        :customRequest="customUpload"
        :show-upload-list="false"
        accept=".jpg, .png,"
        action="#"
        list-type="picture-card"
        style="width: 104px;"
    >
      <a-icon type="plus"/>
      <div class="ant-upload-text">上传</div>
    </a-upload>
  </div>
</template>

<script>
//  引入上传视频  api
import { VIDEOUPLOAD } from '@/services/api';
//  引入显示图片的组件
import PhotoViewer from '../components/PhotoViewer';

export default {
  name: 'ImgUpload',
  components: {
    PhotoViewer
  },
  props: {},
  data() {
    return {
      baseUrl: VIDEOUPLOAD,
      uploadImg: {
        showImages: [], // 相关图片
        previewVisible: false,
        previewImage: '',
      },
    };
  },
  methods: {
    // 图片上传前限制
    beforeUpload(file) {
      const { type, size } = file;
      const limitType = type === 'image/jpeg' || type === 'image/png';
      if (!limitType) {
        this.$message.error('请上传 JPG、PNG 格式图片!');
      }
      const limitSize = size / 1024 / 1024 < 2;
      if (!limitSize) {
        this.$message.error('图片不可大于 2MB!');
      }
      return limitType && limitSize;
    },
    // 自定义上传获取文件内容
    async customUpload(fileInfo) {
      const { file } = fileInfo;
      try {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                const url = await this.fileToBase64(file); // 获取base64地址
        let ob = {
          type: 'upload',
          url,
          file,
        };
        this.uploadImg.showImages.push(ob);
      } catch (err) {
        this.$message.error(err.message);
      }
    },
    // 转换图片地址
    fileToBase64(file) {
      const reader = new FileReader();
      reader.readAsDataURL(file);
      return new Promise((resolve, reject) => {
        reader.onload = function() {
          console.log(this.result)
          if (this.result) {
            resolve(this.result);
          } else {
            reject('图片转换错误，请稍后重试');
          }
          };
        });
    },
    //  照片浏览
    openPreview(index) {
      // 服务器返回的拼接地址，自己上传的直接显示base64地址，这个根据自己后端返回的图片路径判断
      if (this.uploadImg.showImages[index].type === 'upload') {
        this.uploadImg.previewImage = this.uploadImg.showImages[index].url;
      } else {
        this.uploadImg.previewImage = this.baseUrl + this.uploadImg.showImages[index].url;
      }
      this.$refs.photoViewer.show(this.uploadImg.previewImage)
    },
    // 删除上传图片
    deleteRelateImg(index) {
      let that = this;
      this.$confirm({
        title: '确定要删除照片吗？',
        okType: 'danger',
        onOk() {
          that.uploadImg.showImages.splice(index, 1);
        },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.image-list {
  width: 100%;
  display: flex;
  flex-wrap: wrap;

  .list-item {
    position: relative;
    height: 104px;
    margin: 0 8px 8px 0;
    padding: 8px;
    border: 1px solid #D9D9D9;
    border-radius: 4px;

    img {
      min-width: 50px;
      height: 100%;
    }

    .item-hover {
      position: absolute;
      top: 50%;
      left: 50%;
      z-index: 9;
      display: none;
      justify-content: center;
      align-items: center;
      width: calc(100% - 16px);
      height: 88px;
      color: #fff;
      background: rgba(0, 0, 0, .2);
      transform: translate(-50%, -50%);
      cursor: pointer;
    }

    &:hover .item-hover {
      display: flex;
    }
  }
}
</style>
